<script lang="ts" setup>
	import { useRouter } from "uni-mini-router";
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getEdu, getWork } from "@/utlis/common.js";
		import { userStore } from '@/pinia';
	// #ifdef APP-PLUS
	import * as im from '@/common/im.js';
	// #endif
	
	const router = useRouter();
	const { proxy } = getCurrentInstance();

	const clickImg = (item, arr) => {
		let urlArr = [];
		arr.forEach((el) => {
			urlArr.push(el);
		});
		uni.previewImage({
			urls: urlArr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: item, // 当前显示图片的http链接，默认是第一个
			success: function (res) { },
			fail: function (res) { },
			complete: function (res) { },
		});
	};

	let personId = ref("");
	let jobId = ref("");
	let state = reactive({
		detailsData: {},
	});
	onLoad((options) => {
		console.log('传入的参数',options);
		personId.value = options.id;
		jobId.value = options.jobId;
		getDetail();
	});
	let modalData = reactive({
		show: false,
		title: "",
		content: "",
	});
	const getDetail = () => {
		//获取详情
		proxy
			.$req("GET", proxy.$api.meiyeRecruitHunterInfo3QueryById, {
				id: personId.value,
			})
			.then((res) => {
				if (res.code === 200) {
					if (res.result.workPicture) {
						res.result.workPictureArr = res.result.workPicture.split(",");
					} else {
						res.result.workPictureArr = [];
					}
					if (res.result.credentials) {
						res.result.credentialsArr = res.result.credentials.split(",");
					} else {
						res.result.credentialsArr = [];
					}

					state.detailsData = res.result;
				}
			});
	};
	// 打招呼
	const toCall = () => {
		// proxy.$req('GET', proxy.$api.meiyeCollection2Apply, {id:personId.value}).then((res) => {
		// 	if(res.code === 200){
		// 		modalData.show = true
		// 		let job = state.detailsData.jobCategoryName
		// 		modalData.content = `${job}岗位已投递成功，请等待老板回复`
		// 		getDetail()
		// 	}
		// })
		
		toIm();
	};

	// 打招呼
	const toIm = () => {
		const { memberId, positionId } = state.detailsData;
		console.log("老板 老板  state.detailsData", state.detailsData);
		const userStoreInfo = userStore();
		const userId = userStoreInfo.userInfo.id;
			
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'recruitment',
			toUserId: memberId,
			jobId: jobId.value,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
	};

	// 收藏
	const toCollect = () => {
		proxy
			.$req("POST", proxy.$api.MeiyeCollection3Add, {
				colProductId: personId.value,
				colType: 9,
			})
			.then((res) => {
				if (res.code === 200) {
					getDetail();
					uni.showToast({
						title: "收藏成功",
						icon: "none",
					});
				}
			});
	};
	// 取消收藏
	const cancelCollect = () => {
		proxy
			.$req("DELETE", proxy.$api.MeiyeCollection3Delete, {
				id: state.detailsData.collId,
			})
			.then((res) => {
				if (res.code === 200) {
					getDetail();
					uni.showToast({
						title: "取消成功",
						icon: "none",
					});
				}
			});
	};

	const companyDetail = () => {
		router.push({
			name: "companyDetail",
			params: {},
		});
	};
</script>
<template>
	<view class="content">
		<view class="detailName card">
			<image class="dnImg" :src="state.detailsData.headImage" mode=""></image>
			<view class="dnInfo">
				<text class="name">{{ state.detailsData.realName }}</text>
				<text class="desc">{{ state.detailsData.age }}岁|{{ state.detailsData.gender }}|{{
            state.detailsData.race
          }}|{{ getWork(state.detailsData.workExperienceTime) }}|{{
            getEdu(state.detailsData.education)
          }}</text>
			</view>
		</view>
		<view class="detailTag card">
			<text class="dt1">求职意向</text>
			<view class="dt2">
				<text>{{ state.detailsData.position }}</text>
				<text v-if="state.detailsData.comprehensiveSalaryType == 0">面议</text>
				<text v-else>{{ state.detailsData.comprehensiveSalaryStart }} -
					{{ state.detailsData.comprehensiveSalaryEnd }}/月</text>
				<text>{{ state.detailsData.cityName }}-{{
            state.detailsData.areaName
          }}</text>
			</view>
		</view>
		<view class="detailIntro card">
			<view class="di1"> 个人优势 </view>
			<text>
				<u-parse :content="state.detailsData.personalAdvantages"></u-parse>
			</text>
		</view>
		<view class="boxBetween card">
			<view class="bb1"> 工作经历 </view>
			<view class="bbc" v-for="item in state.detailsData.workList" :key="item.id">
				<text>{{ item.startTime }}-{{ item.endTime }}</text>
				<text>{{ item.name }} {{ item.position }}</text>
			</view>
		</view>
		<view class="boxBetween card">
			<view class="bb1"> 教育经历 </view>
			<view class="bbc" v-for="item in state.detailsData.schoolList" :key="item.id">
				<text>{{ item.startTime }}-{{ item.endTime }}</text>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="boxScroll card">
			<view class="bs1"> 作品图片 </view>
			<view class="bsScroll">
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in state.detailsData.workPictureArr" :key="index">
						<image class="bssImg" :src="item" @click="clickImg(item, state.detailsData.workPictureArr)">
						</image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="boxScroll card">
			<view class="bs1"> 资格证书 </view>
			<view class="bsScroll">
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in state.detailsData.credentialsArr" :key="index">
						<image class="bssImg" :src="item" @click="clickImg(item, state.detailsData.credentialsArr)">
						</image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="detailIntro card">
			<view class="di1"> 个人成绩 </view>
			<u-parse :content="state.detailsData.info"></u-parse>
		</view>
	</view>
	<view class="detailBottom">
		<view class="dbLeft">
			<view class="db1">
				<u-icon name="thumb-up" size=24  v-if="state.detailsData.isColl == 0" @click="toCollect"></u-icon>
				<u-icon name="thumb-up" size=24  color="#CB645E" @click="cancelCollect" v-else></u-icon>
				
				<!-- <u-icon name="heart" v-if="state.detailsData.isColl == 0" @click="toCollect"></u-icon>
				<u-icon name="heart-fill" v-else @click="cancelCollect"></u-icon> -->
			</view>
		</view>
		<view class="dbBtn" @click="toCall"> 打招呼 </view>
	</view>

	<u-modal :show="modalData.show" :closeOnClickOverlay="true" :title="modalData.title">
		<view class="content-main" slot="content">{{ modalData.content }}</view>
		<template #confirmButton>
			<u-button class="custom-style" text="我知道了" type="info" shape="circle"
				@click="modalData.show = false"></u-button>
		</template>
	</u-modal>
</template>
<style lang="scss">
	.content {
		padding: 0 24rpx 200rpx;
		background: #f6f6f6;

		.detailName {
			display: flex;
			align-items: flex-start;
			// padding: 30rpx 0;
			border-bottom: 1rpx solid #f1f3f4;

			.dnImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 70rpx;
				margin-right: 20rpx;
			}

			.dnInfo {
				flex: 1;
				// width: 500rpx;
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					margin-bottom: 15rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}

		.detailTag {
			margin-top: 20rpx;

			.dt1 {
				font-size: 36rpx;
				font-weight: 600;
			}

			.dt2 {
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;

				text:nth-child(2),
				text:nth-child(3) {
					color: #909399;
				}
			}
		}

		.detailIntro {
			margin-top: 20rpx;

			.di1 {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.boxBetween {
			margin-top: 20rpx;

			.bb1 {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.bbc {
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
			}
		}

		.boxScroll {
			margin-top: 20rpx;

			.bs1 {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.bsScroll {
				font-size: 22rpx;

				.bssImg {
					width: 150rpx;
					height: 150rpx;
					margin: 0 20rpx;
				}
			}
		}
	}

	.detailBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		.dbLeft {
			display: flex;
		}

		.db1 {
			width: 110rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.dbText {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #909399;
			}
		}

		.dbBtn {
			width: 600rpx;
			height: 100rpx;
			background-color: #CB645E ;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.content-main {
		color: #636366;
		text-align: center;
		line-height: 60rpx;
	}

	.card {
		background: #fff;
		box-sizing: border-box;
		border: 2rpx solid #fff;
		// margin: 30rpx auto;
		padding: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
	}
</style>